<template>
  <div class="page" style="padding-top:10px">
    <!-- <tw-header :label="indexSchoolName"></tw-header> -->
    <el-row
      type="flex"
      justify="space-between"
      :gutter="20"
      style="align-items: stretch"
    >
      <!-- 左侧 -->
      <el-col :span="6">
        <tw-card
          label="学校数量"
          :isBorder="true"
          style="min-height: 302px"
        >
          <tw-linebar source="0" :year="curYear" linetype="line"></tw-linebar>
        </tw-card>
        <tw-card
          label="出生人口数"
          :grayRightLabel="true"
          class="mt-medium"
          :isBorder="true"
          style="min-height: 302px"
        >
          <tw-linebar source="1" :year="curYear" linetype="line"></tw-linebar>
        </tw-card>
        <tw-card
          label="登记结婚数"
          class="mt-medium"
          :isBorder="true"
          style="min-height: 302px"
        >
          <tw-linebar source="2" :year="curYear" linetype="line"></tw-linebar>
        </tw-card>
      </el-col>
      <!-- /左侧 -->
      <!-- 中部 -->
      <el-col :span="12">
        <div>
          <tw-card
            label="小学-学生人数"
            :isBorder="true"
            style="min-height: 302px"
          >
          <div class="tw-card-righttop">
            <div class="righttop-left">当前小学人数<span class="digi">{{$formatNum(forecasedata.xxyc)}}</span>人</div>
            <div class="righttop-right text-highlight"><span class="pl-20">预测下一年度小学学生：</span><span class="digi">{{$formatNum(forecasedata.xxzx)}}</span>人</div>
          </div>
            <tw-linebar source="0" :tjnf="tjnf" linetype="linebar"></tw-linebar>
          </tw-card>
        </div>
        <div>
          <tw-card
            label="初中-学生人数"
            :grayRightLabel="true"
            class="mt-medium"
            :isBorder="true"
            style="min-height: 302px"
          >
          <div class="tw-card-righttop">
            <div class="righttop-left">当前初中人数<span class="digi">{{$formatNum(forecasedata.czyc)}}</span>人</div>
            <div class="righttop-right text-highlight"><span class="pl-20">预测下一年度初中学生：</span><span class="digi">{{$formatNum(forecasedata.czzx)}}</span>人</div>
          </div>
            <tw-linebar source="1" :tjnf="tjnf" linetype="linebar"></tw-linebar>
          </tw-card>
        </div>
        <div>
          <tw-card
            label="高中-学生人数"
            :grayRightLabel="true"
            class="mt-medium"
            :isBorder="true"
            style="min-height: 302px"
          >
          <div class="tw-card-righttop">
            <div class="righttop-left">当前高中人数<span class="digi">{{$formatNum(forecasedata.gzyc)}}</span>人</div>
            <div class="righttop-right text-highlight"><span class="pl-20">预测下一年度高中学生：</span><span class="digi">{{$formatNum(forecasedata.gzzx)}}</span>人</div>
          </div>
            <tw-linebar source="2" :tjnf="tjnf" linetype="linebar"></tw-linebar>
          </tw-card>
        </div>
      </el-col>
      <!-- /中部 -->
      <!-- 右侧 -->
      <el-col :span="6">
        <tw-card
          label="经济总产出"
          :isBorder="true"
          style="min-height: 302px"
          :grayRightLabel="true"
        >
          <tw-fourscatter source="water" :year="curYear" linetype="scatter"></tw-fourscatter>
        </tw-card>
        <tw-card
          label="城乡居民生活用电"
          :isBorder="true"
          :grayRightLabel="true"
          class="mt-medium"
          style="min-height: 302px"
        >
          <tw-linebar source="3" :year="curYear" linetype="scatter"></tw-linebar>
        </tw-card>
        <tw-card
          label="生活用水"
          :isBorder="true"
          class="mt-medium"
          style="min-height: 302px"
        >
          <tw-linebar source="4" :year="curYear" linetype="scatter"></tw-linebar>
        </tw-card>
      </el-col>
      <!-- /右侧 -->
      <!-- <tw-footer :areaid="curAreaId" :active="currentActive"></tw-footer> -->
    </el-row>
    <tw-back-btn url="/index/forecasemonitoring"></tw-back-btn>
  </div>
</template>

<script>
import TwCard from '@/components/TwCard.vue'
import TwLinebar from './linebar.vue'
import TwFourscatter from './fourscatter.vue'
import TwChart from '@/components/TwChart.vue'
import TwBackBtn from '@/components/tw-back-btn/index.js'
export default {
  name: 'forecase',
  components: {
    TwCard,
    TwLinebar,
    TwFourscatter,
    TwChart,
    TwBackBtn},
  created () {
    let vm = this
    let date = new Date()
    vm.tjnf = (date.getFullYear() - 1) + ''

    if (vm.$route.query.areaid) {
      vm.curAreaId = vm.$route.query.areaid
    } else {
      vm.curAreaId = '131000'
    }
    vm.$axios.get('/static/weishidataview/jsondata/config.json', {
      baseURL: ''
    }).then((resp) => {
      // vm.curYear = resp.data.fixedYear
      vm.endtime = resp.data.endtime
      vm.years = resp.data.years
      this.timeout = setInterval(() => {
        vm.i += 1
        if (vm.i >= vm.years.length) {
          vm.i = 0
        }
        vm.$store.commit('setCurYear', vm.years[vm.i])
        vm.curYear = vm.$store.state.curYear
      }, 2000)

      vm.initData()
    }).catch((err) => {
      console.log(err)
    })
  },
  data () {
    return {
      tjnf: '2019',
      indexSchoolName: '学生预测',
      curAreaId: '131000',
      curYear: '2019',
      endtime: '2019-03',
      currentActive: 2,
      oldvalue: {},
      forecasedata: {
        xxyc: 0,
        xxzx: 0,
        czyc: 0,
        czzx: 0,
        gzyc: 0,
        gzzx: 0
      },
      timeout: '',
      i: 0
    }
  },
  destroyed () {
    clearInterval(this.timeout)
  },
  methods: {
    initData () {
      this.app_jxszhjy_fwnlfx_xs('小学')
      this.app_jxszhjy_fwnlfx_xs('初中')
      this.app_jxszhjy_fwnlfx_xs('高中')
      // let vm = this
      // vm.$axios.get('/static/weishidataview/jsondata/forecasegongshu.json', {
      //   baseURL: ''
      // }).then((resp) => {
      //   console.log(resp)
      //   vm.forecasedata = resp.data.forecasedata
      //   vm.oldvalue = resp.data.forecasedata
      // }).catch((err) => {
      //   console.log(err)
      // })
    },
    // 服务能力分析_学生统计
    app_jxszhjy_fwnlfx_xs (queryData) {
      let vm = this
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = { 'fieldName': 'jyjd', 'fieldValues': [queryData], 'operator': 'IN', 'prepender': 'AND' }
      quary.conditions.push(timeSectionValue)

      vm.$axios
        .post('tw-cloud-datatheme-server/themedata/app_jxszhjy_fwnlfx_xs', quary)
        .then(
          (response) => {
            if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
              response.data.pageInfo.list.forEach(item => {
                if (item.tjnf === vm.tjnf) {
                  if (queryData === '小学') {
                    vm.forecasedata.xxyc = item.xsrs
                  } else if (queryData === '初中') {
                    vm.forecasedata.czyc = item.xsrs
                  } else if (queryData === '高中') {
                    vm.forecasedata.gzyc = item.xsrs
                  }
                } else if (item.tjnf > vm.tjnf) {
                  if (parseInt(item.tjnf) - parseInt(vm.tjnf) === 1) {
                    if (queryData === '小学') {
                      vm.forecasedata.xxzx = item.xsrs
                    } else if (queryData === '初中') {
                      vm.forecasedata.czzx = item.xsrs
                    } else if (queryData === '高中') {
                      vm.forecasedata.gzzx = item.xsrs
                    }
                  }
                }
              })
            }
          },
          (response) => {
            console.log('error')
          }
        )
    }
  },
  watch: {
    // '$store.state.curYear' (val) {
    //   let a = this.forecasedata
    //   for (let item in a) {
    //     a[item] = parseInt(a[item] * 1.1)
    //   }
    //   if (val >= this.years[this.years.length - 1]) {
    //     this.forecasedata = { ...this.oldvalue }
    //   } else {
    //     this.forecasedata = a
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.tw-card-righttop {
  display: flex;
  .righttop-right {
    background: url(~@/assets/images/bkg-forecase.png) center no-repeat;
    background-size: 100%;
    height: 46px;
    width: 353px;
    text-align: center;
    .pl-20 {
      padding-left: 20px;
    }
  }
  font-size: 16px;
  line-height: 46px;
  padding: 0 20px;
  position: absolute;
  top: -50px;
  right: 20px;
  .digi {
    font-size: 22px;
  }
}
.page{
  padding: 0 20px;
}
</style>
